<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 一、单向数据流的核心概念
    //     单向数据流是 Vue 中父子组件通信的基本设计原则，指数据只能从父组件向子组件方向传递（通过 props），
    //     而不能反向直接修改。这种设计保证了数据变化的可预测性和可维护性。


    //  二、单向数据流的具体表现

    //    Props 向下传递
    //     父组件通过 props 将数据传递给子组件
    //     子组件通过声明 props 选项接收数据

    // 父组件
    // <ChildComponent :title="parentTitle" />

    // 子组件
    // props: ['title']

    //   Events 向上通知
    //      子组件通过 $emit 触发事件通知父组件
    //      父组件通过 v-on 监听子组件事件
    // 子组件
    // this.$emit('update', newValue)

    // 父组件
    // <ChildComponent @update="handleUpdate" />

    // 三、为什么采用单向数据流

    //     1.数据追踪优势

    //         数据变更来源单一，便于调试和维护
    //         避免了多组件同时修改同一数据导致的混乱

    //     2.组件隔离原则
    //         子组件成为纯展示组件，不直接修改数据
    //         父组件作为数据管理者，统一处理状态变更

    //    3. 架构清晰性
    //         graph TD
    //         A[父组件] -->|props| B[子组件]
    //         B -->|events| A
</script>
</html>